<template>
  <div style="height: 400px">
    <h2>公告速递</h2>
    <router-link :to="{ path: '/home/amusement/' }">返回上一页</router-link>
    <hr>
    <div>
      <el-table :data="notice">
        <el-table-column prop="title"  />
        <el-table-column prop="identity"  align="center"/>
        <el-table-column prop="publishdt"  align="center" >
          <template #default="scope">
            {{ scope.row.publishdt}}
          </template>
        </el-table-column>
        <el-table-column  align="center" width="220px">
          <template #default="scope">
            <a href="http://localhost:8080/?#/home/amusement/teamannounce" @click="showNoticeDetail(scope.row)">详情</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!--  分页-->
  <div class="page" style="margin-left: 800px;margin-top: 100px">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[1,5,10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 详情弹窗 -->
  <el-dialog
      v-model="detailDialogVisible"
      title="公告详情"
      width="50%"
  >
    <div>
      <h2 style="text-align: center; font-weight: bold;">{{ selectedNotice.title }}</h2>
      <div style="padding: 30px 50px;">
        <div style="padding-bottom: 20px; text-indent: 2em; text-align: left;">
          {{ selectedNotice.content }}
        </div>
        <div style="display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;">
          <div>{{ selectedNotice.identity }}</div>
          <div>{{ selectedNotice.publishdt}}</div> <!-- 时间格式化 -->
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="detailDialogVisible = false">确认</el-button>
  </span>
  </el-dialog>
</template>


<script setup>
// 分页
import {ref, reactive, onMounted, defineAsyncComponent} from 'vue';
import request from "@/utils/amusement";
import { ElLoading, ElMessage, ElDialog } from 'element-plus';
import { useRouter } from 'vue-router';
const Home = defineAsyncComponent(() => import('../Home.vue'));
// 分页
const currentPage = ref(1);
const pageSize = ref(7); // 限制每页显示 7 条数据
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const notice = ref([]);
let totals = ref(0);

// 控制详情弹窗显示的变量
const detailDialogVisible = ref(false);

// 存储选中的公告详情
const selectedNotice = ref(null);

onMounted(() => {
  looknotice();
});

const looknotice = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含 ID 参数
  };
  request({
    url: '/notice2/amusement',
    method: 'get',
    params
  }).then(req => {
    console.log(req)
    console.log(req.data)
    if (200 == req.data.errorCode) {
      notice.value = req.data.data.records; // 只保留前 6 条数据
      totals.value = req.data.data.total;
    }
  })
};

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value = val;
  looknotice()
};

const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value = val;
  looknotice()
};

// 新增函数用于显示详情弹窗
const showNoticeDetail = (row) => {
  selectedNotice.value = row;
  detailDialogVisible.value = true;
};
</script>
<style scoped>
.message-box-detail.el-message-box__content {
  overflow: auto; /* 允许内容溢出 */
}
</style>